/**
 * useContext
 *    概念：使用上下文对象，能直接勾出 某个 Context 对象的内容出来
 *
 *    语法：
 *        const value = useContext(context)
 *            1. context  -  某个 Context 对象，也就是 React.createContext() 创建出来的那个玩意。
 *            2. value    -  返回值，就是该 context 对象，提供下来的值。
 */

import { useState, useEffect, useContext, createContext } from "react";

// 创建一个 Context 对象
const MyContext = createContext();

// 之前，通过 Consumer 获取值
// function Hello(props) {
//   return (
//     <MyContext.Consumer>
//       {(value) => {
//         return (
//           <div>
//             <h4>Hello - {value}</h4>
//           </div>
//         );
//       }}
//     </MyContext.Consumer>
//   );
// }

function Hello() {
  const value = useContext(MyContext);

  return (
    <div>
      <h4>Hello - {value}</h4>
    </div>
  );
}

function App() {
  return (
    <MyContext.Provider value={"张三"}>
      <div>
        <h1>App</h1>

        <hr />
        <Hello />
      </div>
    </MyContext.Provider>
  );
}

export default App;
